import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "@/views/Home.vue";
import CustomEvent from "@/views/customEevnt/CustomEvent.vue";
import Props from "@/views/props/Props.vue";
import EevntBus from "@/views/eventBus/EevntBus.vue";
import VModel from "@/views/Vmodel/VModel.vue";
import UseAttrs from "@/views/useAttrs/UseAttrs.vue";
import RefParent from "@/views/refParent/RefParent.vue";
import ProvideInject from "@/views/provideInject/ProvideInject.vue";
import Pinia from "@/views/pinia/Pinia.vue";
import Slot from "@/views/slot/Slot.vue";
import Elemet1 from "@/views/Element1/Elemet-1.vue"
import ElementTable from "@/views/ElementTable/Demo1.vue";
import ShowSlotNamed from "@/views/slot/ShowSlotNamed.vue";
import ShowSlotConditions from "@/views/slot/ShowSlotConditions.vue";
import ShowSlotDynamicSlot from "@/views/slot/ShowSlotDynamicSlot.vue";
import ShowSlotScope from "@/views/slot/ShowSlotScope.vue";
// @ts-ignore
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/props",
    name: "props",
    component: Props,
  },
  {
    path: "/custom_event",
    name: "custom_event",
    component: CustomEvent,
  },
  {
    path: "/event_bus",
    name: "event_bus",
    component: EevntBus,
  },
  {
    path: "/v_model",
    name: "v_model",
    component: VModel,
  },
  {
    path: "/useAttrs",
    name: "useAttrs",
    component: UseAttrs,
  },
  {
    path: "/ref_parent",
    name: "ref_parent",
    component: RefParent,
  },
  {
    path: "/provide_inject",
    name: "provide_inject",
    component: ProvideInject,
  },
  {
    path: "/pinia",
    name: "pinia",
    component: Pinia,
  },
  {
    path: "/slot",
    name: "slot",
    component: Slot,
    children: [
      {
        path: "/slot_named",
        name: "named",
        component: ShowSlotNamed,
      },
      {
        path: "/slot_conditions",
        name: "conditions",
        component: ShowSlotConditions,
      },
      {
        path: "/slot_dynamic",
        name: "dynamic",
        component: ShowSlotDynamicSlot,
      },
      {
        path: "/slot_scope",
        name: "scope",
        component: ShowSlotScope,
      }
    ],
  },
  {
    path:'/element',
    name: "element",
    component:Elemet1
  },
  {
    path:'/elementTable',
    name: "elementTable",
    component:ElementTable
  }

];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
